<template>
  <div
    class="wrapper"
    v-show="flag"
    :style="showObj"
  >
    <router-link to="/">
      <span class="iconfont">&#xe624;</span>
    </router-link>
    城市详情页面
  </div>
</template>

<script>
    export default {
        name: "Header",
        data () {
          return {
             flag : false,
             showObj :{
                opacity : 0
             }
          }
        },
        methods : {
          detailStyleChange () {
              let top=document.documentElement.scrollTop;//滚动高度
              if(top >60 ){//显示
                   let opacity=top / 150
                  opacity > 1 ? 1 : opacity;
                  this.showObj={//设置样式
                     opacity:opacity
                  }
                  this.flag=true;//显示
              }else{//隐藏
                  this.flag=false;
              }
          }
        },
        mounted () {//生命周期函数
          window.addEventListener("scroll",this.detailStyleChange);//绑定滚动事件
        }
    }
</script>

<style lang="stylus" scoped>
  .wrapper{
    width: 100%
    height:.44rem;
    position:fixed;
    z-index :1;
    left:0;top:0;
    background :#00bcd4;
    line-height :.44rem;
    text-align :center;
    color:white;
    font-size :.16rem;
  span{
    position absolute
    left:.1rem;
    color :white;
  }
  }
</style>
